<div id="editor-styles">
<style>
#style-categories {padding:0 0;margin: 0;text-align: center;}
#editor-styles{display:flex;}
#editor-styles .fa{display:none;}
#editor-styles #left-panel{ flex: 0 0 60px;list-style: none; text-align: center; background: rgba(0, 0, 0, 0.6); color: #FFF;}
#editor-styles #left-panel > li.active, #editor-styles #left-panel > li > a:hover { background: #4c4342; text-decoration: none;}
#editor-styles #left-panel > li > a {display: block;line-height: 45px; color: #dad9d8;text-decoration: none;font-size: 12px;border-bottom: 1px solid rgba(255,255,255,0.06);}
#editor-styles .tab-pane{display:none;visibility: hidden;}
#editor-styles .tab-pane.active{display:block;visibility: visible;}
#editor-styles .tab-content{position:relative;}
#editor-styles .tab-content > .tab-pane {display: none;visibility: hidden;}
#editor-styles .tab-content > .active {display: block;visibility: visible;}

#style-categories .active{color:red;}
#style-categories > li {list-style: none;display:inline-block;padding: 0 6px;}
#style-categories > li > a:hover, #style-categories > li > a:focus{text-decoration: none;background-color: #eeeeee;}
#style-categories ul.dropdown-menu li {list-style: none;display:block;padding: 0;}
#style-overflow-list ul li,#system-style-list .col-sm-12 {cursor: pointer;padding: 10px 10px;width: 100%;border-bottom: 1px solid #ddd;}
#style-overflow-list ul li:hover,#system-style-list .col-sm-12:hover {background: #FFF;}
#editor-styles {max-width:500px;}
#editor-styles ul {margin:0 0;}
#editor-styles * {font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;font-size: 14px;}
#editor-styles * {max-width: 100%!important;margin:0;padding:0;font-style:normal;box-sizing: border-box!important;-webkit-box-sizing: border-box!important;word-wrap: break-word!important;}
#editor-styles table{width:100%;}
#editor-styles p{clear:both;margin:0 0;font-size:14px;min-height:1em;white-space: normal;}
#editor-styles img{*zoom:1;max-width:100%;*max-width:96%;height:auto !important;}
#editor-styles iframe{width:301px !important;border:0;background-color:none;}
#editor-styles iframe,#editor-styles .video_iframe {background-color: #000000;width: 100% !important;position: static;}
#editor-styles blockquote{margin:0;padding-left:10px;border-left:3px solid #DBDBDB;}
.filter {cursor: pointer;display: inline-block;}
#editor-styles .pagelink{margin: 10px 0;}
#editor-styles .pagelink span,#editor-styles .pagelink a{padding:0 3px;}
.dropdown { position: relative;}
.dropdown-menu {position: absolute;top: 100%;left: 0;z-index: 1000;display: none;float: left;min-width: 160px;padding: 5px 0;margin: 2px 0 0;list-style: none;font-size: 14px;text-align: left;background-color: #ffffff;border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15);  border-radius: 0px;  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  background-clip: padding-box;}
.open > .dropdown-menu {  display: block;}
.dropdown-menu > li > a { display: block;padding: 5px 15px !important;clear: both;font-weight: normal;line-height: 1.42857143;color: #333333;white-space: nowrap;}
.dropdown-menu > li > a:hover,.dropdown-menu > li > a.active,.dropdown-menu > li > a:focus { text-decoration: none;  color: #ffffff;  background-color: #2fa4e7;}
.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus { color: #ffffff; text-decoration: none;outline: 0;background-color: #2fa4e7;}
</style>
<link rel="stylesheet" type="text/css" href="//static.135editor.com/fonts/icon135/iconfont.css" />
	<ul id="left-panel" class="editor-menus">
		<li><img src="http://image.135editor.com/logo.png" title="135编辑器插件版" style="width:60px;padding:10px 5px;"></li>
		<li class="active"><a href="#favor-styles" class="changeStyles" data-type="favor">精选样式</a></li>
		
		<li><a href="#favor-styles" class="changeStyles" data-type="opennew">在线样式</a></li>
	</ul>

	<div class="tab-content" id="editor-styles-content" style="flex:1;overflow: hidden;background:#FFF;">
		<div id="online-styles"  class="tab-pane" style="overflow-x: hidden;background-color: #fcfcfc;height: 100%;"></div>
		<div id="favor-styles"  class="tab-pane active">
	<div id="copyright" style="line-height:40px;">
          	<div style="line-height:30px;padding:0 10px;color: #555; background-color:rgba(76, 67, 66,0.2);background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);">
          		<p><img src="http://image.135editor.com/logot.png" title="135编辑器" alt="135编辑器" style="height:14px !important;"> <span style="font-size:12px;">VIP专享</span>
          			<span style="cursor:pointer;float:right;margin-right:20px;" id="refresh-styles" title="刷新样式"><i class="fa fa-refresh"></i>刷新</span>
          		</p>
          		 <p><input type="text" placeholder="输入关键字搜索样式" style="height:30px;width:150px;color: #333;background-color: transparent; border: 1px solid #ddd; padding:0 10px;" id="txtStyleSearch"> 
          		</p>
          	</div>
          	<div id="styleSearchResult" style="position:absolute;display:none;top:60px;left:0px;padding:10px;width:384px;z-index: 100;border: 5px solid rgba(80,80,80,0.2);background:#FFF;">
          		<p>搜索结果 <span class="btn" style="float:right;font-size: 24px;    color: #000000;font-weight: bold;text-shadow: 0 1px 0 #ffffff;" onclick="$('#styleSearchResult').hide();"> × </span> </p>
          		<div id="styleSearchResultList" style="height:500px;width:100%;overflow-y:auto;">
          			<img src="//static.135editor.com/img/ajax/circle_ball.gif">
          		</div>
          	</div>
	 </div>
	 <div style="background-color:rgba(234,234,234,0.9);height:44px;line-height:22px;text-align:center;">
          	{{template editor_styles/style_categories}}
	  </div>
		<div id="style-overflow-list" style="overflow-y:auto;overflow-x:hidden;height:300px;background-color: #fcfcfc;">			
			<div id="load-more-style" class="alert alert-warning m0"></div>
		</div>
	</div>
	</div>
</div>

<section id="color-plan" style="width:110px;position:fixed;top:105px;right:-5px;height:320px;text-align: center;display:none;z-index: 1000;">
	<div id="color-choosen" style="position:absolute;right:0px;padding: 10px 0px !important;width:105px;padding:5px 0;background:rgba(58,51,50,0.8);">		
			  	<div style="margin:5px 5px;color:#FFF;line-height:32px;text-align: center;position:relative;" >
		        	<input id="custom-color-text" class="colorPicker form-control" style="font-size:12px;width:80px;color:#FFF;padding:4px;height:24px;line-height:16px" id="custom-color" value="#EF7060" />
		        </div>
		        
		        <div style="margin:0 0;color:#dad9d8;line-height:18px;text-align: center;"><label style="cursor:pointer;margin-bottom:0px;"><input style="margin-top:8px;" type="checkbox" id="replace-color-all" value="1"> 全文换色</label></div>

			 	<hr style="margin:2px 20px;border-color:#ddd;"/>
			    <ul class="clearfix" style="list-style:none;padding:0 5px;margin:0 0;">
		            <li class="color-switch" style="background-color: #ac1d10"></li>
		            <li class="color-switch" style="background-color: #d82821;"></li>
		            <li class="color-switch default-color" style="background-color: #ef7060;"></li>
		            <li class="color-switch" style="background-color: #fde2d8;"></li>
		            
		            <li class="color-switch" style="background-color: #d32a63;"></li>
		            <li class="color-switch" style="background-color: #eb6794;"></li>
		            <li class="color-switch" style="background-color: #f5bdd1;"></li>            
		            <li class="color-switch" style="background-color: #ffebf0;"></li>
		            
		            <li class="color-switch" style="clear:left;background-color: #e2561b;"></li>
		            <li class="color-switch" style="background-color: #ff8124;"></li>
		            <li class="color-switch" style="background-color: #fcb42b;"></li>
		            <li class="color-switch" style="background-color: #feecaf;"></li>
		            
		            <li class="color-switch" style="clear:left;background-color: #0c8918;"></li>
		            <li class="color-switch" style="background-color: #80b135;"></li>
		            <li class="color-switch" style="background-color:#c2c92a;"></li>
		            <li class="color-switch" style="background-color:#e5f3d0;"></li>
		            
		            <!-- <li class="color-switch" style="clear:left;background-color: #1f877a;"></li>
		            <li class="color-switch" style="background-color: #27abc1;"></li>
		            <li class="color-switch" style="background-color: #5acfe1;"></li>
		            <li class="color-switch" style="background-color: #b6f2ea;"></li> -->
		            
		            <li class="color-switch" style="clear:left;background-color:#374aae;"></li>
		            <li class="color-switch" style="background-color:#1e9be8;"></li>
		            <li class="color-switch" style="background-color:#59c3f9;"></li>
		            <li class="color-switch" style="background-color:#b6e4fd;"></li>
		
		            <li class="color-switch" style="clear:left;background-color:#5b39b4;"></li>
		            <li class="color-switch" style="background-color: #4c6ff3;"></li>
		            <li class="color-switch" style="background-color:#91a8fc;"></li>
		            <li class="color-switch" style="background-color:#d0dafe;"></li>
		            
		            <!-- 紫色 -->
		            <li class="color-switch" style="clear:left;background-color:#8d4bbb;"></li>
		            <li class="color-switch" style="background-color: rgb(166, 91, 203);"></li>
		            <li class="color-switch" style="background-color:#cca4e3;"></li>
		            <li class="color-switch" style="background-color: rgb(190, 119, 99);"></li>
		            
		            <li class="color-switch" data-color="#efefef" style="clear:left;background-color:#3c2822;"></li>
		            <li class="color-switch" style="background-color:#6b4d40;"></li>
		            <li class="color-switch" style="background-color:#9f887f;"></li>
		            <li class="color-switch" style="background-color:#d7ccc8;"></li>
		            
		        	<li class="color-switch" style="background-color: #212122;"></li>
		        	<li class="color-switch" style="background-color: #757576;"></li>
		        	<li class="color-switch" style="background-color: #c6c6c7"></li>
		        	<li class="color-switch" style="background-color: #f5f5f4"></li>
		        	
		        </ul>
		        {{if $current_user_id}}
		        {{/if}}
	</div>        
</section>
